<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .display{
            height: 400px;
        }
        ul>li{
            display: block;
            width: 20%;
            float: left;
        }
    
        ul>li>img{
            width: 80%;
            border-radius: 10px;
        }
        /* .current{
            border: 2px solid orangered;
        } */
        ul>li>img:hover{
            border: 2px solid orangered;
        }
    </style>
</head>
<body>
    <h1>相册</h1>
    <!-- 大图展示区 -->
    <img class="display" src="./img/app.png" />
    <!-- 小图列表展示区 -->
    <ul>
        <li><img class="current" src="./img/b.png" /></li>
        <li><img src="./img/b.png" /></li>
        <li><img src="./img/b.png" /></li>
        <li><img src="./img/b.png" /></li>
    </ul>
    <button>点击换一批照片</button>
    <script>
        // 获取所有小图
        var imgs = document.querySelectorAll('ul>li>img');
        // 获取大图
        var display = document.querySelector('.display');
        // 获取按钮
        var btn = document.querySelector('button');
        // 定义一个变量，用于记录当前显示的图片的索引
        var index = 0;
        // 为每个小图绑定点击事件
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onclick = function(){
                // 修改大图的src属性
                display.src = this.src;// 修改当前显示的图片的索引
                index = i;
                // 为当前显示的图片添加current类
                this.classList.add('current');
                // 为其他图片移除current类
                for(var j = 0; j < imgs.length; j++){
                    if(j != i){
                        imgs[j].classList.remove('current');
                    }
                }
            }
        }
        // 为按钮绑定点击事件
        btn.onclick = function(){
            // 修改当前显示的图片的索引
            index++;
            // 判断索引是否超出范围
            if(index >= imgs.length){
                index = 0;
            }
            // 修改大图的src属性
            display.src = imgs[index].src;
            // 为当前显示的图片添加current类
            imgs[index].classList.add('current');
            // 为其他图片移除current类
            for(var j = 0; j < imgs.length; j++){
                if(j != index){
                    imgs[j].classList.remove('current');
                }
            }
        }
    </script>
</body>
</html>